<template>
	<view id="bbs">
		<!-- 背景半椭圆 -->
		<view id="background-top" />
		
		<!-- 头部搜索框 -->
		<view class="header">
			<uni-row>
					<uni-col :span="20">
						<uni-search-bar class="searchBar" placeholder="请输入搜索内容" :radius="200" @confirm="toSearch" v-model="searchValue"
							clearButton="auto" cancelButton="none"/>
					
					</uni-col>
					<uni-col :span="4">
						<view class="consult">
							<uni-icons type="plusempty" size="16px" color="white"></uni-icons>
							<text class="consult_text">
								发布
							</text>
						</view>
					</uni-col>
				</uni-row>
		</view>
		
		<!-- 索引栏 -->
		<view class="main">
				<view class="main-header">
					<uni-segmented-control :current="segmentState.current" :values="segmentState.values" :style-type="segmentState.styleType" :activeColor="segmentState.activeColor" @clickItem="changeSegmentCurrent"></uni-segmented-control>
					
				</view>
				
				<view class="main-body">
					
					
					<!-- 推荐板块 -->
					<view class="hot" v-if="segmentState.current===0">
						<rv-infomation :info="item" v-for="(item,index) in infomation.list" :key="index"></rv-infomation>
						<view class="reachBottom">
							<uni-load-more iconType="circle" :content-text="{contentdown:'加载更多'}" :status="infomationStatus" />
						</view>
					</view>
					
					<!-- 最新板块 -->
					<view class="new" v-else-if="segmentState.current===1">
						<rv-infomation :info="item" v-for="(item,index) in [infomation.list[0]]" :key="index"></rv-infomation>
						<view class="reachBottom">
							<uni-load-more iconType="circle" :content-text="{contentdown:'加载更多'}" :status="infomationStatus" />
						</view>
					</view>
					
					<!-- 关注板块 -->
					<view class="attention" v-else-if="segmentState.current===2">
						这里是关注板块
					</view>
					
					<!-- 我的板块 -->
					<view class="mine" v-else-if="segmentState.current===3">
						这里是我的板块
					</view>
				</view>
		</view>
		
	</view>
</template>

<script>
	import rvInfomation from '../../components/rvInfomation/rvInfomation.vue';
	export default {
		data() {
			return {
				// 搜索框
				searchValue:"",
				
				// 索引栏
				segmentState:{
					current:0,
					values:["推荐","最新","关注","我的"],
					styleType:"text",
					activeColor:"#ec3525"
				},
				
				// 资讯
				infomationNumber: 10,
				infomationStatus: "more",
				infomation:{
					top: null,
					list:[{
							senderInfo:{
								senderHeaderSrc:"logo.jpg",
								senderName:"互联网+ 隆平文化驿站",
								senderTime:"2022-04-05 09:55"
							},
							detail:{
								content:"习近平：坚持把解决好“三农”问题作为全党工作重中之重 举全党全社会之力推动乡村振兴",
								view:12,
								srcList:["dd656a1bbf52772c6e20a509592b5a2.jpg","20220405125152.jpg"]
							},
							isAttention:true,
							isEssence:true,
							data:{praise:11,comment:0,share:5}
						},{
							senderInfo:{
								senderHeaderSrc:"",
								senderName:"新用户No8u61b1",
								senderTime:"2022-04-04 18:26"
							},
							detail:{
								content:"薄皮甜瓜整蔓是细活，告诉你3个小秘密，保你早结，瓜多。时间进入4月不需几日清明便会交节",
								view:5,
								srcList:["20220405_130752_.png","20220405_130805_.png","20220405_130822_.png"]
							},
							isAttention:false,
							isEssence:false,
							data:{praise:3,comment:1,share:0}
						}
						
						
					]
				}
			}
		},
		onReachBottom(){
			if(this.infomationStatus!='noMore'){
				this.infomationStatus="loading";
				setTimeout(()=>{
					this.infomationStatus="noMore";
				},1000)
			}
		},
		methods: {
			// 搜索框
			toSearch(){
				
			},
			
			// 索引栏
			changeSegmentCurrent({currentIndex}){
				if(this.segmentState.current!==currentIndex){
					this.segmentState.current=currentIndex;
					uni.showLoading({
						title: '加载中',
						mask:true
					});
					
					setTimeout(()=>{
						uni.hideLoading();
					}, 2000);
				}
			}
			
		},
		components:{
			rvInfomation
		}
	}
</script>

<style lang="scss" scoped>
	#bbs{
		.infomation{
			background-color: #f0eff4;
			padding-bottom: 5px;
			
		}
		
		.main{
			.main-header{
				width: 100%;
				position: sticky;
				top: 0;
				margin-top: 10px;
				padding: 10px;
				background-color: #fff;
				z-index: 10;
				box-shadow: 0 2px 3px 0px rgba($color: #000000, $alpha: 0.08);
			}
			
			.main-body{
				>view{
					min-height: 100px;
					background-color: #f2f2f2;
				}
			}
		}
		
	}
</style>

<style lang="scss">
	#background-top{
		margin: 0!important;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 150px;
		background-color: #ec3525;
		border-radius: 0 0 30% 30%;
		z-index: -10;
	}
	#bbs {
		position: relative;
		font-size: 14px;
		line-height: 24px;
		
		.header{
			padding: 0 5px;
			// 搜索框边框
			.uni-searchbar{
				padding: 0;
			}
			// 搜索框box
			.uni-searchbar__box{
				height: 30px;
			}
			
			// 咨询按钮
			.consult {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 30px;
				line-height: 30px;
				text-align: center;
				color: white;
				font-weight: bold;
				font-size: 16px;
			}
		}
	
		.main{
			.main-header{
				.segmented-control__text{
					font-size: 18px;
					font-weight: bold;
					color: #3A3A3A;
					transition: all 0.3s;
				}
				.segmented-control__item--text{
					display: inline-block;
					transform: scale(1.1);
				}
			}
		}
	}
</style>